<template>
  <div class="production-day-b">
    <!-- 生产监测 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">生产监测</div>
        </div>
        <div class="times">
          <el-date-picker v-model="paramsQuery.yearMonth" type="month" @change="selectTime" format="yyyy-MM"
            value-format="yyyy-MM" placeholder="选择日期" />
        </div>
      </div>
      <!-- 四个模块横向一排 -->
      <el-row :gutter="16" style="margin-top: 16px">
        <!-- 1. 本月生产数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">本月生产数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate1 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="monthTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" class-name="grey-column" :show-overflow-tooltip="true" min-width="40" />
              <el-table-column prop="amount" :show-overflow-tooltip="true" min-width="40" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" class-name="grey-column" :show-overflow-tooltip="true" min-width="40"
                align="center">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" :show-overflow-tooltip="true" min-width="40" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 2. 本月产量分布 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">本月产量分布</div>
            <div ref="monthPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>

        <!-- 3. 昨日生产数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">昨日生产数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate2 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="dayTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" :show-overflow-tooltip="true" min-width="40" class-name="grey-column" />
              <el-table-column prop="amount" align="center" :show-overflow-tooltip="true" min-width="40">
                <template slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" :show-overflow-tooltip="true" min-width="40" class-name="grey-column"
                align="center">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" align="center" :show-overflow-tooltip="true" min-width="40"> <template
                  slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 4. 昨日产量分布 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">昨日产量分布</div>
            <div ref="dayPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 本月生产趋势 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">本月生产趋势</div>
        </div>
      </div>
      <div ref="stackBar" style="height: 360px; margin-top: 16px"></div>
    </div>

    <!-- ===== 实时库存-矩形水波图 start ===== -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">
            实时库存(更新于{{ getCurrentDateTime() }})
          </div>
        </div>
      </div>

      <!-- 水波图容器 -->
      <div class="stock-charts">
        <div class="chart-item" v-for="(item, index) in stockData" :key="index">
          <div :ref="'tank' + index" style="width: 180px; height: 220px"></div>
          <div class="tank-label">{{ item.label }}</div>
        </div>
      </div>
    </div>

    <!-- 销售监测 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">销售监测</div>
        </div>
      </div>
      <!-- 四个模块横向一排 -->
      <el-row :gutter="16" style="margin-top: 16px">
        <!-- 1. 本月销售数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">本月销售数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate3 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="salesMonthTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" :show-overflow-tooltip="true" min-width="40" class-name="grey-column" />
              <el-table-column prop="amount" align="center" :show-overflow-tooltip="true" min-width="40"> <template
                  slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" align="center" class-name="grey-column" :show-overflow-tooltip="true"
                min-width="40">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" align="center" :show-overflow-tooltip="true" min-width="40">
                <template slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 2. 本月销量分布 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">本月销量分布</div>
            <div ref="salesMonthPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>

        <!-- 3. 昨日销售数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">昨日销售数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate4 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="salesDayTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" :show-overflow-tooltip="true" min-width="40" class-name="grey-column" />
              <el-table-column prop="amount" align="center" :show-overflow-tooltip="true" min-width="40"> <template
                  slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" align="center" class-name="grey-column" :show-overflow-tooltip="true"
                min-width="40">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" align="center" :show-overflow-tooltip="true" min-width="40">
                <template slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 4. 昨日销量分布 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">昨日销量分布</div>
            <div ref="salesDayPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 本月销售趋势 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">本月销售趋势</div>
        </div>
      </div>
      <div ref="salesStackBar" style="height: 360px; margin-top: 16px"></div>
    </div>

    <!-- 运输监测 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">运输监测</div>
        </div>
      </div>
      <!-- 四个模块横向一排 -->
      <el-row :gutter="16" style="margin-top: 16px">
        <!-- 1. 本月运输数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">本月运输数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate5 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="transMonthTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" :show-overflow-tooltip="true" min-width="40" class-name="grey-column" />
              <el-table-column prop="amount" align="center" :show-overflow-tooltip="true" min-width="40"> <template
                  slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" class-name="grey-column" align="center" :show-overflow-tooltip="true"
                min-width="40">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" align="center" :show-overflow-tooltip="true" min-width="40">
                <template slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 2. 本月运输量 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">本月运输量</div>
            <div ref="transMonthPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>

        <!-- 3. 今日运输数据 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="card-title-row">
              <div class="card-title">今日运输数据</div>
              <div class="plan-rate">
                完成率：{{ planCompletionRate6 }}%
              </div>
            </div>
            <el-table class="my-mini-table" :data="transDayTable" size="mini" :show-header="false" style="width: 100%"
              max-height="220">
              <el-table-column prop="name" :show-overflow-tooltip="true" min-width="40" class-name="grey-column" />
              <el-table-column prop="amount" align="center" :show-overflow-tooltip="true" min-width="40"> <template
                  slot-scope="scope">
                  <div>{{ scope.row.amount }}万吨</div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" align="center" :show-overflow-tooltip="true" min-width="40"
                class-name="grey-column">
                <template>
                  <div>环比</div>
                </template>
              </el-table-column>
              <el-table-column prop="ratio" align="center" :show-overflow-tooltip="true" min-width="40">
                <template slot-scope="scope">
                  <div>{{ scope.row.ratio }}%</div>
                </template>
              </el-table-column>
              <el-table-column prop="trend" min-width="40" align="center">
                <template #default="scope">
                  <div v-if="scope.row.trend == 'up'">
                    <i class="el-icon-top" style="color: green"></i>
                  </div>
                  <div v-if="scope.row.trend == 'down'">
                    <i class="el-icon-bottom" style="color: red"></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 4. 今日运输量 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-block module-border">
            <div class="sub-title">今日运输量</div>
            <div ref="transDayPie" style="height: 230px; width: 100%"></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 本月运输趋势 -->
    <div class="box-padding-16">
      <div class="box-padding-16-flex">
        <div class="box-padding-16-flex-left">
          <div class="line"></div>
          <div class="box-title">本月运输趋势</div>
        </div>
      </div>
      <div ref="transStackBar" style="height: 360px; margin-top: 16px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/pictorialBar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/grid";
import {
  monthlydata,
  productiondistribution,
  dailydata,
  distributiontoday,
  inventorydistribution,
  monthlysales,
  distributionmonth,
  dailydata1,
  distributionsales,
  monthlytrend,
  transportation,
  transportationdistribution,
  dailytransportation,
  distributiontodays,
  transportationtrend,
  productionmonthlytrend,
} from "@/api/home.js";
/* ===== 1. 新增两行 ===== */
import "echarts-liquidfill";

/* ===== 2. 下面这段直接插在 import 区域之后（常量） ===== */
const rectPath =
  "M8,0 L92,0 Q100,0 100,8 L100,92 Q100,100 92,100 L8,100 Q0,100 0,92 L0,8 Q0,0 8,0 Z";
const pieOption = (title, data) => ({
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c}万吨",
  },
  legend: {
    right: 0, // 距离右侧边距（可调整）
    top: "center", // 垂直居中
    orient: "vertical", // 垂直排列
    icon: "circle",
    itemWidth: 10, // 圆点直径
    itemHeight: 10, // 圆点直径
    itemGap: 12, // 图例间隔（可选）
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      center: ["35%", "50%"],
      label: {
        show: true,
        position: "outside",
        formatter: "{b}\n{c}万吨",
        fontSize: 11,
      },
      labelLine: { show: true, length: 8, length2: 12 },
      emphasis: {
        label: { show: true, fontSize: 10, fontWeight: "bold" },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      data: data.map((item, index) => ({
        ...item,
        emphasis: {
          label: { show: true, fontSize: 12, fontWeight: "bold" },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
          color: function (params) {
            return color[params.dataIndex];
          },
        },
        // 饼图扇形颜色（保持渐变）
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: gradientColors[index % gradientColors.length][0],
              },
              {
                offset: 1,
                color: gradientColors[index % gradientColors.length][1],
              },
            ],
          },
        },
      })),
    },
  ],
});

// 渐变色配置（需放在pieOption外部定义）
const gradientColors = [
  // 原有颜色（1-5）
  ["#FAB2FF", "#5644FF"],   // 紫
  ["#7AECF8", "#48DE94"],   // 青绿
  ["#FEA492", "#FF4C52"],   // 红
  ["#A5A1FF", "#1F90FF"],   // 蓝
  ["#5155C6", "#5155C6"],   // 深蓝

  // 新增颜色（6-10）
  ["#FFB366", "#FF8C42"],   // 橙
  ["#FAB2FF", "#5644FF"],
  ["#FF6B9D", "#C44569"],   // 粉
  ["#667EEA", "#764BA2"],   // 紫蓝
  ["#4FACFE", "#00F2FE"],   // 天蓝
  ["#F9D423", "#12D8FA"],   // 黄青
];

export default {
  name: "ProductionDayB",
  data() {
    return {
      liquidCharts: [], // 新增
      // 新增渐变色配置
      gradientColors: [
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#f5c6d6" }, { offset: 1, color: "#f19ab4" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#a1ecf5" }, { offset: 1, color: "#8fe9f3" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#f8c0b5" }, { offset: 1, color: "#f8989c" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#9ecbf5" }, { offset: 1, color: "#68b1f1" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#acaef5" }, { offset: 1, color: "#a4a6f5" }] },
        // 新增
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFB366" }, { offset: 1, color: "#FF8C42" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FAB2FF" }, { offset: 1, color: "#7c70f5" }] },

        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#869af6" }, { offset: 1, color: "#a97ad9" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#4FACFE" }, { offset: 1, color: "#00F2FE" }] },
        { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#F9D423" }, { offset: 1, color: "#12D8FA" }] }
      ],
      paramsQuery: {
        yearMonth:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1).toString().padStart(2, "0"),
      },
      // 运输——表格数据
      transMonthTable: [
        {
          spec: "总量",
          unit: "环比",
          amount: "532万吨",
          ratio: "102%",
          ratioClass: "up",
        },
        {
          spec: "油车1",
          unit: "环比",
          amount: "135万吨",
          ratio: "105%",
          ratioClass: "up",
        },
        {
          spec: "油车2",
          unit: "环比",
          amount: "128万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "油车3",
          unit: "环比",
          amount: "132万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "油车4",
          unit: "环比",
          amount: "137万吨",
          ratio: "98%",
          ratioClass: "",
        },
      ],
      transDayTable: [
        {
          spec: "总量",
          unit: "环比",
          amount: "18万吨",
          ratio: "102%",
          ratioClass: "up",
        },
        {
          spec: "油车1",
          unit: "环比",
          amount: "5.2万吨",
          ratio: "105%",
          ratioClass: "up",
        },
        {
          spec: "油车2",
          unit: "环比",
          amount: "4.1万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "油车3",
          unit: "环比",
          amount: "4.5万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "油车4",
          unit: "环比",
          amount: "4.2万吨",
          ratio: "98%",
          ratioClass: "",
        },
      ],
      // 运输——饼图数据
      transMonthPie: [

      ],
      transDayPie: [

      ],
      // 运输——堆叠柱状图数据（单位：吨）
      transRawData: [[48000, 48000, 48000, 48000, 48000, 48000, 48000]],
      // 销售——表格数据
      salesMonthTable: [
        {
          spec: "总量",
          unit: "环比",
          amount: "522万吨",
          ratio: "102%",
          ratioClass: "up",
        },
        {
          spec: "5-10",
          unit: "环比",
          amount: "52万吨",
          ratio: "105%",
          ratioClass: "up",
        },
        {
          spec: "10-20",
          unit: "环比",
          amount: "48万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "20-30",
          unit: "环比",
          amount: "50万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "机制砂",
          unit: "环比",
          amount: "45万吨",
          ratio: "98%",
          ratioClass: "",
        },
      ],
      salesDayTable: [
        {
          spec: "总量",
          unit: "环比",
          amount: "12万吨",
          ratio: "102%",
          ratioClass: "up",
        },
        {
          spec: "5-10",
          unit: "环比",
          amount: "3.2万吨",
          ratio: "105%",
          ratioClass: "up",
        },
        {
          spec: "10-20",
          unit: "环比",
          amount: "2.8万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "20-30",
          unit: "环比",
          amount: "3.0万吨",
          ratio: "98%",
          ratioClass: "",
        },
        {
          spec: "机制砂",
          unit: "环比",
          amount: "2.9万吨",
          ratio: "98%",
          ratioClass: "",
        },
      ],
      // 销售——饼图数据
      salesMonthPie: [

      ],
      salesDayPie: [

      ],
      // 销售——堆叠柱状图数据
      salesRawData: [
        [120, 352, 321, 354, 410, 350, 340],
        [310, 142, 111, 144, 100, 240, 220],
        [240, 202, 211, 254, 310, 350, 330],
        [170, 232, 221, 174, 210, 350, 430],
        [840, 852, 921, 954, 1310, 1350, 1340],
      ],
      stockData: [
        { label: "5-10", value: "30.12", levelHeight: "65%" },
        { label: "10-20", value: "30.12", levelHeight: "65%" },
        { label: "20-30", value: "30.12", levelHeight: "65%" },
        { label: "机制砂", value: "30.12", levelHeight: "65%" },
      ],
      value1: "",
      rawData: [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
        [150, 212, 201, 154, 190, 330, 410],
        [820, 832, 901, 934, 1290, 1330, 1320],
      ],
      xAxisDays: ["10-30", "10-31", "11-1", "11-2", "11-3", "11-4", "11-5"],
      legend: ["5-10", "10-20", "20-30", "机制砂", "其他"],
      monthTable: [],
      dayTable: [],
      month: {
        pieData: [
          { name: "5-10", value: 5.2 },
          { name: "10-20", value: 5.21 },
          { name: "20-30", value: 6.32 },
          { name: "机制砂", value: 5.2 },
        ],
      },
      day: {
        pieData: [
          { name: "5-10", value: 5.2 },
          { name: "10-20", value: 5.21 },
          { name: "20-30", value: 6.32 },
          { name: "机制砂", value: 5.2 },
        ],
      },
      cylinderData: [
        { value: 80, label: "5-10碎石", color: "#268AFF" },
        { value: 65, label: "10-20碎石", color: "#1ED6FF" },
        { value: 45, label: "20-30碎石", color: "#3DFFDC" },
        { value: 30, label: "机制砂", color: "#36F097" },
      ],
      chartMonth: null,
      chartDay: null,
      chartStack: null,
      chartCylinder: null,
      salesChartMonth: null,
      salesChartDay: null,
      salesChartStack: null,
      transChartMonth: null,
      transChartDay: null,
      transChartStack: null,
      planCompletionRate1: 0,
      planCompletionRate2: 0,
      planCompletionRate3: 0,
      planCompletionRate4: 0,
      planCompletionRate5: 0,
      planCompletionRate6: 0,
    };
  },
  created() {
    this.loadAllData();
  },
  mounted() {
    this.initCharts();
    this.initStackBar();
    this.$nextTick(() => {
      this.initTransCharts();
      this.initTransStackBar();
      this.initSalesCharts();
      this.initSalesStackBar();
      this.drawLiquidTanks();
    });

    // ✅ 初始同步一次
    this.$nextTick(() => {
      this.handleResize();
    });

    // ✅ 监听窗口变化
    window.addEventListener("resize", this.handleResize);

    // ✅ 清理监听
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("resize", this.handleResize);
      this.disposeAllCharts();
      this.disposeLiquid();
    });
  },
  beforeDestroy() {
    [this.transChartMonth, this.transChartDay, this.transChartStack].forEach(
      (c) => c?.dispose()
    );
    window.removeEventListener("resize", () => this.chart.resize());
    [this.salesChartMonth, this.salesChartDay, this.salesChartStack].forEach(
      (c) => c?.dispose()
    );
    window.removeEventListener("resize", this.handleResize);
    [
      this.chartMonth,
      this.chartDay,
      this.chartStack,
      this.chartCylinder,
    ].forEach((c) => c?.dispose());
    this.disposeLiquid();
    window.removeEventListener("resize", this.resizeLiquid);
  },
  methods: {
    drawLiquidTanks() {
      this.disposeLiquid();
      this.liquidCharts = [];

      this.stockData.forEach((item, idx) => {
        const refs = this.$refs[`tank${idx}`];
        if (!refs || !refs[0]) return;

        const dom = refs[0];
        const chart = echarts.init(dom);

        // ✅ 获取实际米数（如13.5）
        const actualHeight = Number(item.value);
        console.log(actualHeight, 'actualHeight')
        if (isNaN(actualHeight) || actualHeight < 0) return;

        // ✅ 计算占比：实际高度 / 总高20m
        const ratio = Math.min(actualHeight / 20, 1); // 限制最大为1（100%）

        chart.setOption({
          series: [
            {
              type: "liquidFill",
              shape: rectPath,
              radius: "90%",
              waveAnimation: true,
              animationDuration: 1500,
              color: [item.color || "#268AFF"],
              backgroundStyle: {
                borderWidth: 1,
                borderColor: "#409eff",
                color: "#f3f7fb",
              },
              outline: { show: false },
              label: {
                show: true,
                formatter: actualHeight.toFixed(2) + 'm', // ✅ 显示实际米数
                fontSize: 22,
                color: "#303133",
                fontWeight: "bold",
              },
              data: [ratio], // ✅ 使用计算出的比例控制水波高度
            },
          ],
        });

        this.liquidCharts.push(chart);
      });
    },
    // 2. 销毁
    disposeLiquid() {
      this.liquidCharts.forEach((c) => c?.dispose());
      this.liquidCharts = [];
    },

    // 3. 自适应
    resizeLiquid() {
      this.liquidCharts.forEach((c) => c?.resize());
    },
    selectTime() {
      this.loadAllData();
      setTimeout(() => {
        document.querySelectorAll(".tank-level").forEach((level) => {
          level.style.transition = "height 1.5s ease-out";
          level.style.height = level.style.height;
        });
      }, 100);
      this.initCharts();
      this.initStackBar();
      this.$nextTick(() => {
        this.initTransCharts();
        this.initTransStackBar();
      });
      this.$nextTick(() => {
        this.initSalesCharts();
        this.initSalesStackBar();
      });
    },
    customSort(array) {
      const priorityMap = {
        '机制砂': 0,
        '5-10mm': 1,
        '10-20mm': 2,
        '20-31.5mm': 3,
        '毛石': 4,
        '收尘粉': 5,
        '回填渣': 6
      };
      return [...array]
        // 第一步：过滤掉size为0的项
        .filter(item => item.amount !== 0)
        // 第二步：执行自定义排序
        .sort((a, b) => {
          const keyA = String(a.name); // 确保转换为字符串处理
          const keyB = String(b.name);

          // 获取优先级（仅处理映射表中存在的字段）
          const priorityA = priorityMap[keyA] ?? Infinity;
          const priorityB = priorityMap[keyB] ?? Infinity;

          return priorityA - priorityB;
        });
    },
    loadAllData() {
      inventorydistribution(this.paramsQuery).then((res) => {
        console.log(res.data)
        this.stockData = res.data.map((item, idx) => ({
          label: item.category,
          value: parseFloat(item.amount),
          color: this.gradientColors[idx % this.gradientColors.length],
        }));
        console.log(this.stockData)
        this.$nextTick(() => {
          this.drawLiquidTanks();
        });
      }),
        monthlydata(this.paramsQuery).then((res) => {
          // this.monthTable = res.data.items;
          // console.log(this.monthTable)
          this.monthTable = this.customSort(res.data.items)
          this.planCompletionRate1 = res.data.planCompletionRate;
        });

      dailydata(this.paramsQuery).then((res) => {
        // this.dayTable = res.data.items;
        // console.log(this.dayTable)
        this.dayTable = this.customSort(res.data.items)
        this.planCompletionRate2 = res.data.planCompletionRate;
      });
      monthlysales(this.paramsQuery).then((res) => {
        // this.salesMonthTable = res.data.items;
        // console.log(this.salesMonthTable)
        this.salesMonthTable = this.customSort(res.data.items)
        this.planCompletionRate3 = res.data.planCompletionRate;
      });
      dailydata1(this.paramsQuery).then((res) => {
        // this.salesDayTable = res.data.items;
        this.salesDayTable = this.customSort(res.data.items)
        this.planCompletionRate4 = res.data.planCompletionRate;
      });
      transportation(this.paramsQuery).then((res) => {
        // this.transMonthTable = res.data.items;
        this.transMonthTable = this.customSort(res.data.items)
        this.planCompletionRate5 = res.data.planCompletionRate;
      });
      dailytransportation(this.paramsQuery).then((res) => {
        // this.transDayTable = res.data.items;
        this.transDayTable = this.customSort(res.data.items)
        this.planCompletionRate6 = res.data.planCompletionRate;
      });
    },
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      return `${year}/${month}/${day} ${hours}:${minutes}`;
    },
    initTransCharts() {
      const chart1 = echarts.init(this.$refs.transMonthPie);
      const chart2 = echarts.init(this.$refs.transDayPie);

      transportationdistribution(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.transMonthPie = res.data;
        // chart1.setOption(pieOption("本月运输量", this.transMonthPie));
        // this.transChartMonth = chart1;
        this.transMonthPie = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        chart1.setOption(pieOption("本月运输量", this.transMonthPie));
        this.transChartMonth = chart1;
      });
      distributiontodays(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.transDayPie = res.data;
        // chart2.setOption(pieOption("今日运输量", this.transDayPie));
        // this.transChartDay = chart2;
        this.transDayPie = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        chart2.setOption(pieOption("今日运输量", this.transDayPie));
        this.transChartDay = chart2;
      });
    },
    initTransStackBar() {
      const chart = echarts.init(this.$refs.transStackBar);
      transportationtrend(this.paramsQuery).then((res) => {
        console.log(res.data, '本月运输趋势')
        let xAxisDays = res.data.map((item) => item.date);
        let machineSand = res.data.map((item) => item.machineSand);
        let range5To10 = res.data.map((item) => item.range5To10);
        let range10To20 = res.data.map((item) => item.range10To20);
        let range20To30 = res.data.map((item) => item.range20To30);
        let total = res.data.map((item) => item.total);
        let legend = ["机制砂", "5-10", "10-20", "20-30", "合计"];
        this.rawData = [
          machineSand,
          range5To10,
          range10To20,
          range20To30,
          total,
        ];

        const series = this.salesRawData.map((arr, idx) => ({
          name: legend[idx],
          type: "bar",
          stack: "total",
          barWidth: "35%",


          itemStyle: {
            color: this.gradientColors[idx],
            // 阴影效果
            shadowBlur: 6,
            shadowColor: "rgba(0,0,0,0.16)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            // 白边和圆角
            // borderColor: "#fff",
            // borderWidth: 2,
            // borderRadius: [4, 4, 4, 4], // 顶部圆角，底部直角
          },
          data: arr,
        }));
        chart.setOption({
          tooltip: {
            trigger: "axis", // 关键：触发方式为“坐标轴”
            axisPointer: {
              // 让柱子高亮更直观
              type: "shadow",
            },
            formatter: function (params) {
              // params 是该 x 轴上所有系列的数据数组
              let tpl = params[0].name + "<br/>"; // 日期
              params.forEach((item) => {
                tpl += `${item.marker} ${item.seriesName}: ${item.value} 吨<br/>`;
              });
              return tpl;
            },
          },
          legend: {
            bottom: 0,
            icon: "circle",
            itemWidth: 10, // 圆点直径
            itemHeight: 10, // 圆点直径
            itemGap: 12, // 图例间隔（可选）
          },
          grid: { left: 50, right: 40, top: 30, bottom: 60 },
          xAxis: { type: "category", data: xAxisDays },
          yAxis: {
            type: "value",
            name: "吨",
            axisLabel: { formatter: "{value}" },
          },
          series,
        });
        this.transChartStack = chart;
      });
    },
    initSalesCharts() {
      const chart1 = echarts.init(this.$refs.salesMonthPie);
      const chart2 = echarts.init(this.$refs.salesDayPie);
      distributionmonth(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.salesMonthPie = res.data;
        // chart1.setOption(pieOption("本月销量分布", this.salesMonthPie));
        // this.salesChartMonth = chart1;

        this.salesMonthPie = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        chart1.setOption(pieOption("本月销量分布", this.salesMonthPie));
        this.salesChartMonth = chart1;
      });
      distributionsales(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.salesDayPie = res.data;
        // chart2.setOption(pieOption("今日销量分布", this.salesDayPie));
        // this.salesChartDay = chart2;

        this.salesDayPie = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        chart2.setOption(pieOption("今日销量分布", this.salesDayPie));
        this.salesChartDay = chart2;
      });
    },

    initSalesStackBar() {
      monthlytrend(this.paramsQuery).then((responseData) => {
        console.log(responseData.data, '本月销售趋势')
        const xAxisDays = responseData.data.map(item => item.date);
        const productKeys = Object.keys(responseData.data[0].productData);
        const series = productKeys.map((key, idx) => ({
          name: key,
          type: "bar",
          stack: "total",
          barWidth: "35%",
          data: responseData.data.map(item => item.productData[key]),
          itemStyle: {
            color: this.gradientColors[idx],
            shadowBlur: 6,
            shadowColor: "rgba(0,0,0,0.16)"
          },
        }));

        // 初始化图表
        if (this.salesChartStack) this.salesChartStack.dispose();
        this.salesChartStack = echarts.init(this.$refs.salesStackBar);
        this.salesChartStack.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
            formatter: params => {
              let tpl = params[0].name + "<br/>";
              params.forEach(item => {
                tpl += `${item.marker} ${item.seriesName}: ${item.value} 吨<br/>`;
              });
              return tpl;
            },
          },
          legend: {
            data: productKeys,
            bottom: 0,
            icon: "circle",
            itemWidth: 10,
            itemHeight: 10,
          },
          grid: { left: 50, right: 40, top: 30, bottom: 60 },
          xAxis: { type: "category", data: xAxisDays },
          yAxis: { type: "value", name: "吨" },
          series,
        });
      });
    },
    initCharts() {
      this.chartMonth = echarts.init(this.$refs.monthPie);
      this.chartDay = echarts.init(this.$refs.dayPie);
      productiondistribution(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.month.pieData = res.data;
        // this.chartMonth.setOption(
        //   pieOption("本月产量分布", this.month.pieData)
        // );

        this.month.pieData = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        this.chartMonth.setOption(pieOption("本月产量分布", this.month.pieData));
      });
      distributiontoday(this.paramsQuery).then((res) => {
        // res.data.forEach((item) => {
        //   item.name = item.category;
        //   item.value = item.amount;
        // });
        // this.day.pieData = res.data;
        // this.chartDay.setOption(pieOption("今日产量分布", this.day.pieData));

        this.day.pieData = res.data
          .filter(item => item.amount && item.amount !== 0) // 核心：过滤0值
          .map(item => ({
            ...item,
            name: item.category,
            value: item.amount
          }));
        this.chartDay.setOption(pieOption("今日产量分布", this.day.pieData));

      });
    },
    initStackBar() {
      productionmonthlytrend(this.paramsQuery).then((responseData) => {
        console.log(responseData.data, '本月生产趋势')
        const xAxisDays = responseData.data.map(item => item.date);
        const productKeys = Object.keys(responseData.data[0].productData);

        // 生成 series（按产品分类）
        const series = productKeys.map((key, idx) => ({
          name: key,
          type: "bar",
          stack: "total",
          barWidth: "35%",
          data: responseData.data.map(item => item.productData[key]),
          itemStyle: {
            color: this.gradientColors[idx],
            shadowBlur: 6,
            shadowColor: "rgba(0,0,0,0.16)"
          },
        }));

        // 初始化图表
        if (this.chartStack) this.chartStack.dispose();
        this.chartStack = echarts.init(this.$refs.stackBar);
        this.chartStack.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
            formatter: params => {
              let tpl = params[0].name + "<br/>";
              params.forEach(item => {
                tpl += `${item.marker} ${item.seriesName}: ${item.value} 吨<br/>`;
              });
              return tpl;
            },
          },
          legend: {
            data: productKeys,
            bottom: 0,
            icon: "circle",
            itemWidth: 10,
            itemHeight: 10,
          },
          grid: { left: 50, right: 40, top: 30, bottom: 60 },
          xAxis: { type: "category", data: xAxisDays },
          yAxis: { type: "value", name: "吨" },
          series,
        });
      });
    },
    drawCylinder() {
      const chart = echarts.init(this.$refs.cylinderGroup);
      const data = [30.12, 30.12, 30.12, 30.12];
      const labels = ["5-10", "10-20", "20-30", "机制砂"];
      const colors = ["#268AFF", "#1ED6FF", "#3DFFDC", "#36F097"];

      const topH = 10;
      const bodyH = 200;
      const bottomH = 10;

      const series = [];
      const graphic = [];

      data.forEach((v, i) => {
        const left = 10 + i * 22.5; // 四等分留白
        const center = left + 11.25;

        // 主体柱
        series.push(
          {
            type: "bar",
            barWidth: 60,
            xAxisIndex: 0,
            yAxisIndex: 0,
            stack: "total" + i,
            data: [v],
            label: {
              show: true,
              position: "inside",
              formatter: "{c}m",
              fontSize: 16,
              color: "#1AFCFF",
              textShadowBlur: 10,
              textShadowColor: colors[i],
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[i] },
                { offset: 1, color: colors[i].replace("FF", "88") },
              ]),
              opacity: 0.9,
            },
          },
          {
            type: "bar",
            barWidth: 60,
            xAxisIndex: 0,
            yAxisIndex: 0,
            stack: "total" + i,
            data: [100 - v],
            itemStyle: { color: "transparent" },
          }
        );

        // 顶圆
        graphic.push({
          type: "group",
          left: center + "%",
          top: 30,
          children: [
            {
              type: "ellipse",
              shape: { cx: 0, cy: 0, rx: 30, ry: topH / 2 },
              style: { fill: "rgba(8,44,110,1)" },
            },
          ],
        });
        // 底圆
        graphic.push({
          type: "group",
          left: center + "%",
          top: 30 + topH + bodyH,
          children: [
            {
              type: "ellipse",
              shape: { cx: 0, cy: 0, rx: 30, ry: bottomH / 2 },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  { offset: 0, color: colors[i] },
                  { offset: 1, color: "rgba(8,44,110,0.8)" },
                ]),
              },
            },
          ],
        });
      });

      chart.setOption({
        backgroundColor: "transparent",
        grid: { left: "5%", right: "5%", top: 30, bottom: 60 },
        xAxis: {
          type: "category",
          data: labels,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
            interval: 0,
          },
        },
        yAxis: { show: false, min: 0, max: 100 },
        series,
        graphic,
      });
      this.chart = chart;
    },
    handleResize() {
      // 1. 生产相关图表
      this.chartMonth?.resize();
      this.chartDay?.resize();
      this.chartStack?.resize();
      this.chartCylinder?.resize();

      // 2. 销售相关图表
      this.salesChartMonth?.resize();
      this.salesChartDay?.resize();
      this.salesChartStack?.resize();

      // 3. 运输相关图表
      this.transChartMonth?.resize();
      this.transChartDay?.resize();
      this.transChartStack?.resize();

      // 4. 水波图（库存）
      this.resizeLiquid();
    },
  },
};
</script>

<style scoped lang="scss">
.times {
  width: 120px;
  height: 24px;
  display: flex;
  align-items: center;
}

.times ::v-deep .el-input__inner {
  width: 120px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 30px;
  background: rgba(243, 247, 251, 1);
}

.times ::v-deep .el-input__icon {
  line-height: 24px;
}

.titles {
  font-weight: bold;
  font-size: 16px;
  border-left: 5px solid blue;
  padding-left: 10px;
  margin: 10px 0;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: bold;
}

.production-card ::v-deep .el-table--mini td {
  padding: 10px 0;
}



.stock-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stock-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.stock-header h4 {
  margin: 0;
  color: #333;
  // font-weight: 600;
}

.update-time {
  margin-left: 15px;
  color: #909399;
  font-size: 14px;
}

.stock-charts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}

.chart-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tank-container {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tank {
  width: 100%;
  height: 200px;
  position: relative;
}

.tank-top {
  width: 100%;
  height: 30px;
  border: 2px solid #409eff;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background-color: transparent;
  position: relative;
}

.tank-top::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 2px;
  background-color: #409eff;
}

.tank-body {
  width: 100%;
  height: 140px;
  border-left: 2px solid #409eff;
  border-right: 2px solid #409eff;
  position: relative;
  overflow: hidden;
}

.plan-rate {
  background: linear-gradient(180deg, #48A5FE 0%, #487DFE 100%);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  padding: 5px;
}

.tank-level {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #e4e7ed;
  transition: height 0s;
}

.tank-bottom {
  width: 100%;
  height: 30px;
  border: 2px solid #409eff;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background-color: transparent;
}

.tank-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #303133;
  font-size: 16px;
  font-weight: 500;
  z-index: 1;
}

.tank-label {
  // margin-top: 15px;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stock-charts {
    flex-direction: column;
    align-items: center;
  }

  .chart-item {
    width: 100%;
    max-width: 220px;
  }
}

.stock-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
  justify-content: center;
}

.chart-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tank-label {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
}

.my-mini-table ::v-deep .cell {
  font-size: 13px !important;
}

/* 基础样式 - 浅灰色滚动条 */
// ::v-deep .my-mini-table .el-table__body-wrapper {
//   &::-webkit-scrollbar {
//     width: 8px;
//     height: 8px;
//   }

//   /* 正常状态滑块 */
//   &::-webkit-scrollbar-thumb {
//     background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
//     border-radius: 4px;
//     transition: background 0.3s ease;
//     /* 添加过渡效果 */
//   }

//   /* 悬停状态滑块 */
//   &::-webkit-scrollbar-thumb:hover {
//     background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
//     /* 悬停时稍深 */
//   }

//   /* 轨道样式 */
//   &::-webkit-scrollbar-track {
//     background: #f8f8f8;
//     border-radius: 4px;
//   }
// }

// /* Firefox兼容样式 */
// ::v-deep .my-mini-table .el-table__body-wrapper {
//   scrollbar-width: thin;
//   scrollbar-color: #e0e0e0 #f8f8f8;
// }

.addBorder {
  border-radius: 3px;
  border: 2px solid #e7e7e7;
  padding: 10px;
  box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.16);
}

/* 生产监测 4 块等分容器 */
.card-row {
  display: flex;
  gap: 10px; // 块之间 10 px
  margin-top: 16px;
}

/* 单个卡片 */
.card-item {
  flex: 1; // 4 等分
  display: flex;
  flex-direction: column;
  padding: 10px; // 统一内边距
  background: #ffffff;
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  }
}

/* 表格左右留白 10 px */
.card-item .my-mini-table {
  padding: 0 10px;
}

.card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #ffffff;
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* 关键：把溢出部分裁掉 */
}

/* === 四个模块横向一排核心样式（高度统一）=== */

.module-block {
  padding: 15px;
  background: #ffffff;
  border-radius: 6px;
  height: 310px;
  /* ✅ 统一固定高度 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 防止flex溢出 */
  overflow: hidden;
  /* 防止内容溢出 */
}

.module-border {
  border: 2px solid #e7e7e7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.module-border:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

/* 标题行固定高度 */
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: bold;
  flex-shrink: 0;
  /* 不压缩 */
  height: 36px;
  /* ✅ 固定标题高度 */
}

.sub-title {
  font-weight: bold;
  flex-shrink: 0;
  line-height: 36px;
  height: 36px;
  /* ✅ 固定标题高度 */
  font-size: 13px;
}

/* 内容区域填充剩余空间 */
.module-block>.el-table {
  flex: 1;
  /* ✅ 填充所有剩余空间 */
  width: 100% !important;
  max-height: none !important;
  /* 移除之前的max-height限制 */
}

.module-block>.sub-title+div {
  flex: 1;
  /* ✅ 饼图填充剩余空间 */
  width: 100% !important;
  min-height: 0;
  /* 允许flex子项收缩 */
}

.el-col {
  display: flex;
  flex-direction: column;
}

/* 表格第一列和第三列灰色字体 */
::v-deep .grey-column {
  color: #909399 !important;
  /* Element UI 标准灰色 */
}

// /* 基础样式 - 浅灰色滚动条 */
// ::v-deep .my-mini-table .el-table__body-wrapper {
//   &::-webkit-scrollbar {
//     width: 8px;
//     height: 8px;
//   }

//   /* 移除滚动条按钮（上下箭头） */
//   &::-webkit-scrollbar-button {
//     display: none;
//   }

//   /* 正常状态滑块 */
//   &::-webkit-scrollbar-thumb {
//     background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
//     border-radius: 4px;
//     transition: background 0.3s ease;
//   }

//   /* 悬停状态滑块 */
//   &::-webkit-scrollbar-thumb:hover {
//     background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
//   }

//   /* 轨道样式 */
//   &::-webkit-scrollbar-track {
//     background: #f8f8f8;
//     border-radius: 4px;
//   }
// }</style>
